<template>
  <div class="main">
    <div class="top">
      <img class="topImg" src="../assets/image/back.jpg" />
      <img class="topImg_" style="margin-right:100px" src="../assets/image/logo.png" />
      <img class="topImg_" src="../assets/image/tel.png" />
    </div>
    <div class="content" v-if="type">
      <div class="content_top">申请信息</div>
      <div class="content_input">
        <input placeholder="博物馆或景区名称" v-model="name" />
      </div>
      <div class="content_input">
        <input placeholder="姓名" v-model="fullName" />
      </div>
      <div class="content_input">
        <input placeholder="职务" v-model="position" />
      </div>
      <div class="content_input">
        <input placeholder="手机号码" v-model="phone" />
      </div>
      <div class="button" @click="submit" v-if="status">提交</div>
      <div class="button" @click="submit" v-else>提交中...</div>
      <div class="login" @click="back">我要登陆</div>
      <!-- <div class="texta">
        杭州博物文化传播有限公司技术支持
        <span style="margin-left:30px">客服热线：13905718102</span>
      </div> -->
    </div>
    <div class="content" v-else>
      <div class="content_success">
        <img src="../assets/image/chenggong.png" />
        <p>申请成功</p>
      </div>
      <div class="content_title">
        您的申请已提交，客服人员将尽快联系您
        <span style="margin-left:10px" class="login" @click="back">返回首页</span>
      </div>
      <!-- <div class="texta">
        杭州博物文化传播有限公司技术支持
        <span style="margin-left:30px">客服热线：13905718102</span>
      </div> -->
    </div>
    <!-- <div class="bottom_title">
      <img src="../assets/image/feizhu.png" />
      <p>文旅绿码后台管理系统飞猪版</p>
    </div> -->
    <div class="bottom_title">
      <img src="../assets/image/th.png" />
      <p>杭州博物文化传播有限公司技术支持 <span style="margin-left:30px">客服热线：13905718102</span> <a style="text-decoration:none; color:#999999;" href="https://beian.miit.gov.cn">浙ICP备2021008879号-2</a></p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fullName: "",
      name: "",
      phone: "",
      position: "",
      status: true,
      type: true
    };
  },
  methods: {
    back() {
      this.$router.push({ name: "signin" });
    },
    submit() {
      if (
        this.fullName == "" ||
        this.name == "" ||
        this.phone == "" ||
        this.position == ""
      ) {
        this.$Message.error("请确保表单填写完毕");
        return false;
      }
      this.status = false;
      this.$http(
        "stage/intent/saveRegistrationIntent",
        {
          fullName: this.fullName,
          name: this.name,
          phone: this.phone,
          position: this.position
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.type = false;
          } else {
            this.$Message.error(res);
          }
          this.status = true;
        }
      );
    }
  }
};
</script>

<style scoped>
.main {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
}
.top {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topImg_ {
  height: 60px;
  z-index: 10;
}
.topImg {
  width: 100%;
  height: 80px;
  position: absolute;
}

.content {
  width: 300px;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  margin-top: -200px;
}
.content_top {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  color: #000000;
  font-size: 13px;
  border-bottom: 1px solid #e6e6e6;
}
.content_success {
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.content_success img {
  width: 50px;
  height: 50px;
  margin-right: 20px;
}
.content_success p {
  font-size: 16px;
  font-weight: 500;
}
.content_title {
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #999999;
}
.content_input {
  width: 300px;
  height: 27px;
  margin-top: 15px;
}
input {
  width: 100%;
  height: 100%;
  outline: none;
  border: none;
  background-color: #f0f0f0;
  border-radius: 2px;
  text-indent: 10px;
  color: #000000;
  font-size: 11px;
  letter-spacing: 1px;
}
input::placeholder {
  font-size: 11px;
  color: #999999;
}

.button {
  width: 300px;
  height: 32px;
  background-color: #17b371;
  border-radius: 30px;
  margin-top: 30px;
  color: white;
  text-align: center;
  line-height: 32px;
  font-size: 12px;
  cursor: pointer;
  font-weight: bold;
}
.button:hover {
  opacity: 0.8;
}
.login {
  width: 100%;
  color: #17b371;
  text-align: center;
  font-size: 12px;
  margin-top: 10px;
  cursor: pointer;
}
.login:hover {
  opacity: 0.9;
}
.texta {
  width: 300%;
  color: #999999;
  text-align: center;
  font-size: 12px;
  margin-top: 30px;
  margin-left: -100%;
}

.bottom_title {
  width: 100%;
  height: 15%;
  position: absolute;
  bottom: 0;
}
.bottom_title img {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  border-radius: 4px;
  margin-left: -20px;
}
.bottom_title p {
  width: 100%;
  text-align: center;
  position: absolute;
  top: 50px;
  color: #999999;
  font-size: 12px;
  opacity: 0.8;
}
</style>